body {
    margin: 0;
    padding: 0;

    .container {
        height: 100vh;

        .item {
            // width: calc(100vw/12);
            width: 8.333%;
            float: left;
            height: 100vh;
            text-align: center;
            line-height: 100vh;
            position: relative;
            font-size: 50px;

            div {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100vh;
                width: 0;
                overflow: hidden;
                color: #fff;
            }

            .x1 {
                background: rgb(196, 184, 19);
                animation: widthChange .6s 0s linear forwards;
            }

            .x2 {
                background: rgb(83, 116, 223);
                animation: widthChange .6s 0.7s linear forwards;
            }

            .x3 {
                background: rgb(214, 138, 75);
                animation: widthChange .6s 1.4s linear forwards;
            }

            .x4 {
                background: rgb(52, 163, 158);
                animation: widthChange .6s 2.1s linear forwards;
            }

            .x5 {
                background: rgb(82, 66, 75);
                animation: widthChange .6s 2.8s linear forwards;
            }
        }
    }
}

@keyframes widthChange {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}